<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>发送1</button>
    <button>发送2</button>
    <div id="root"></div>
</body>
<script>
    // 接口：https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=大连&ci=65&channelId=4
    // 请求方式：get
    const btns = document.querySelectorAll("button");
    const root = document.querySelector("#root");
    btns[0].onclick = function(){
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("get","http://127.0.0.1/maoyan");
        xhr.send();
        xhr.onload = function(){
            root.innerHTML = null;
            console.time();
            // 重排重绘：当你的几何属性发生改变，会影响到其它的元素（），会产生重排，重排之后就需要重新渲染。
            xhr.response.data.hot.forEach(item=>{
                root.innerHTML+=`
                    <div>
                        <img height="200" src="${item.img}" alt="">
                        <h3>${item.nm}</h3>
                        <hr/>
                    </div>
                `
            });
            console.timeEnd();
        }
    }
    btns[1].onclick = function(){
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("get","http://127.0.0.1/maoyan");
        xhr.send();
        xhr.onload = function(){
            root.innerHTML = null;
            console.time();
            root.innerHTML = xhr.response.data.hot.map(item=>(`
                 <div>
                     <img height="200" src="${item.img}" alt="">
                     <h3>${item.nm}</h3>
                     <hr/>
                 </div>
            `)).join("");
            console.timeEnd();
        }
    }

</script>
</html>